<script setup>
import { Search } from '@element-plus/icons-vue'

  import { ref } from 'vue'
  import {useRouter} from 'vue-router'
  const router = useRouter()


  const props = defineProps({
    word:{
      type:String,
      default:''

    },

  })
  // emit方法
  const emit = defineEmits(['get-word'])
  const handleSearch = (e) => {
    emit('get-word',e.target.value)
  }



</script>
<template>
  <div class="search-container">
    <el-input  @blur="handleSearch" @keyup.enter="handleSearch" :value="word" class="input" placeholder="上海" :prefix-icon='Search' >
        <!-- 使用 suffix 插槽放置搜索按钮 -->
        <template #suffix>
          <div class="search-button" @click="handleSearch">搜索</div>
        </template>
      <!-- <el-input type="submit"></el-input> -->
  </el-input>


  </div>
</template>
<style lang="scss" scoped>
  .search-container {
    position: relative;
    width: 300px;
    border-radius: 15px 15px ;
    :deep(.el-input__wrapper) {
    border-radius: 15px; /* 设置输入框圆角 */
  }
    .input {
      width: 100%;
      // border-radius: 15px 15px ;
    }
    .search-button {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      color: black;
      background-color: #007BFF;
      border-radius: 0 15px 15px 0;
    }
  }
  // .input {
  //     width: 300px; // 调整输入框宽度
  //     :deep(.el-input__wrapper) {
  //       padding-right: 60px; // 为搜索按钮留出空间
  //     }

  //     .search-button {
  //       position: absolute;
  //       right: 0;
  //       top: 0;
  //       height: 100%;
  //       width: 60px;
  //       background-color: #fa2209;
  //       color: white;
  //       display: flex;
  //       align-items: center;
  //       justify-content: center;
  //       cursor: pointer;
  //       border-top-right-radius: 4px;
  //       border-bottom-right-radius: 4px;
  //       &:hover {
  //         background-color: darken(#fa2209, 10%);
  //       }
  //     }
  //   }
</style>
